<template>
  <div class="page-scan">
    <!-- 扫码区域 -->
    <video ref="video" id="video" class="scan-video" autoplay></video>
    <!-- 提示语 -->
    <div v-show="tipShow" class="scan-tip">{{ tipMsg }}</div>
  </div>
</template>

<script>
import { BrowserMultiFormatReader } from "@zxing/library";
export default {
  name: "scanCodePage",
  props:{
    scanType : {
      type : String,
      default : ()=>{
        return "start";
      }
    }
  },
  data() {
    return {
      codeReader: null,
      scanText: "",
      tipMsg: "正在尝试识别....",
      tipShow: false,
      index : 1
    };
  },
  // created() {
  //   this.codeReader = new BrowserMultiFormatReader();
  //   console.log("开始");
  //   this.openScan();
  // },
  mounted() {
    this.codeReader = new BrowserMultiFormatReader();
    console.log(this.codeReader,"-====");
    this.openScan();
  },
  destroyed() {
    console.log("销毁");
    this.codeReader.reset();
  },
  watch: {
    // '$route'(to, from) {
    //   if(to.path == '/scanCodePage'){
    //     this.codeReader = new BrowserMultiFormatReader();
    //     this.openScanTwo();
    //   }
    // }
  },
  methods: {
    async openScan() {
      this.codeReader
        .getVideoInputDevices()
        .then((videoInputDevices) => {
          this.tipShow = true;
          this.tipMsg = "正在调用摄像头...";
          console.log("videoInputDevices", videoInputDevices);
          // 默认获取第一个摄像头设备id
          let firstDeviceId = videoInputDevices[0].deviceId;
          // 获取第一个摄像头设备的名称
          const videoInputDeviceslablestr = JSON.stringify(
            videoInputDevices[0].label
          );
          if (videoInputDevices.length > 1) {
            // 判断是否后置摄像头
            if (videoInputDeviceslablestr.indexOf("back") > -1) {
              firstDeviceId = videoInputDevices[0].deviceId;
            } else {
              firstDeviceId = videoInputDevices[1].deviceId;
            }
          }
          this.decodeFromInputVideoFunc(firstDeviceId);
        })
        .catch((err) => {
          this.tipShow = false;
          console.log(err,"eeeeee");
          // console.error(err);
        });
    },
    async openScanTwo() {
      this.codeReader = await new BrowserMultiFormatReader();
      this.codeReader
        .getVideoInputDevices()
        .then((videoInputDevices) => {
          this.tipShow = true;
          this.tipMsg = "正在调用摄像头...";
          console.log("videoInputDevices", videoInputDevices);
          // 默认获取第一个摄像头设备id
          let firstDeviceId = videoInputDevices[0].deviceId;
          // 获取第一个摄像头设备的名称
          const videoInputDeviceslablestr = JSON.stringify(
            videoInputDevices[0].label
          );
          if (videoInputDevices.length > 1) {
            // 判断是否后置摄像头
            if (videoInputDeviceslablestr.indexOf("back") > -1) {
              firstDeviceId = videoInputDevices[0].deviceId;
            } else {
              firstDeviceId = videoInputDevices[1].deviceId;
            }
          }
          this.decodeFromInputVideoFunc(firstDeviceId);
        })
        .catch((err) => {
          this.tipShow = false;
          
          console.error(err);
        });
    },
   async decodeFromInputVideoFunc(firstDeviceId) {
      this.codeReader.reset(); // 重置
      this.scanText = "";
      this.codeReader.decodeFromInputVideoDeviceContinuously(
        firstDeviceId,
        "video",
        (result, err) => {
          this.tipMsg = "正在尝试识别...";
          this.scanText = "";
          if (result) {
            console.log("扫描结果", result);
            this.scanText = result.text;
            if (this.scanText) {
              this.tipShow = false;
              this.$emit("scanEnd", this.scanText,this.scanType); //扫码成功
            }
          }
          if (err && !err) {
            this.tipMsg = "识别失败";
            setTimeout(() => {
              this.tipShow = false;
            }, 2000);
            console.log(err,"999999");
          }
        }
      );
    },
  },
};
</script>

<style scoped>
.scan-video {
  height: 60%;
  width : 100%;
  padding: 0;
}
.scan-tip {
  width: 100vw;
  color: #ccc;
  font-size: 5vw;
}
.page-scan {
  overflow: hidden;
  background-color: #363636;
  height: 60%;
}
</style>
